<template>
    <div class="main-box">
        <div class="title">标签管理</div>
        <div class="operation">
            <div class="operation-bar">
                <div class="left-bar">
                    <el-button @click="openDialog" type="primary">
                        <i class="iconfont icon-jiahao"></i>
                        <span>新增</span>
                    </el-button>
                    <el-button type="danger" @click="deleteBatch">
                        <i class="iconfont icon-jiahao"></i>
                        <span>批量删除</span>
                    </el-button>
                </div>
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;">
                            <el-input v-model="queryData.data.tagName" clearable style="width: 200px;" placeholder="请输入标签名称">
                                <template v-slot:prefix>
                                    <i class="iconfont icon-sousuo"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getPage" type="primary">
                                <i class="iconfont icon-sousuo" style="margin-right: 5px;"></i>搜索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" @selection-change="doSelectionChange" v-loading="tableLoading" border style="height:100%;">

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column label="编号" align="center" width="80">
                    <template #default="scope">
                        {{ (queryData.currPage - 1) * queryData.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column prop="date" label="标签名"  align="center" >
                    <template #default="scope">
                        <el-tag>
                            {{ scope.row.tagName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="articleCount" label="文章量"  align="center"  />
                <el-table-column prop="createTime" label="创建时间"  align="center" />

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button @click="openDialog(scope.row)" type="primary" plain size="small">
                            <i class="iconfont icon-bianji mr5"></i>
                            编辑
                        </el-button>
                        <el-button type="danger" @click="deleteTag(scope.row)" plain size="small">
                            <i class="iconfont icon-lajixiang mr5"></i>
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <Pagination :totalCount="totalCount" :get-page="changeCurrentPage" />

        <Dialog :dialog="dialog" @confirm="handleConfirm">
            <el-form :model="tagForm" label-width="80px">
                <el-form-item prop="tagName" label="标签名称" >
                    <el-input v-model="tagForm.tagName"></el-input>
                </el-form-item>
            </el-form>
        </Dialog>

        
    </div>
</template>

<script>
    export default {
        name: 'Blank'
    }
</script>
<script setup>
import Dialog from '@/components/Dialog.vue'
import Pagination from '@/components/Pagination.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'
import { queryTagPage, createTag,updateTag,delBatchTag  } from '@/api/tagApi'

// 表格 数据
let tableData = ref([
    
])
let totalCount = ref(0)
const queryData = reactive({
    pageSize: 10,
    currPage: 1,
    data: {
        tagName:''
    }
})
// 表格加载
let tableLoading = ref(false)

// 获取分页数据
function getPage() {
    tableLoading.value = true
    queryTagPage(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res.list
        totalCount.value = res.totalCount
    })
}

function changeCurrentPage(currPage) {
    queryData.currPage = currPage
    getPage()
}

onMounted(() => {
    getPage()
})

let dialog = ref({
    title:'新增标签',
    visible:false
}) 

let tagForm = ref({
    tagName: ''
})

function openDialog(row) {
    if(!row) {
        tagForm.value = {}
    } else {
        tagForm.value = JSON.parse(JSON.stringify(row))
    }
    dialog.value.visible = true
}

function handleConfirm() {
    if(tagForm.value.id) {
        updateTag(tagForm.value).then(res=>{
            dialog.value.visible = false
            Messager.ok('更新成功')
            getPage()
        })
    } else {
        createTag(tagForm.value).then(res=>{
            Messager.ok('保存成功')
            dialog.value.visible = false
            getPage()
        })
    }
}

// 删除提示
function deleteTag(row) {

    MsgBoxer.confirm(`确认删除该${row.tagName}标签吗?`).then(() => {
        delBatchTag([row.id]).then(res => {
            Messager.ok('删除成功')
            getPage()
        })
    })

}

// 批量操作
let selectedIds = ref([])
function doSelectionChange(selection) {
    selectedIds.value = []
    selection.forEach((row) => {
        selectedIds.value.push(row.id)
    })
}

function deleteBatch() {
    MsgBoxer.confirm('是否批量删除这 ' + selectedIds.value.length + ' 个').then(() => {
        delBatchTag(selectedIds.value).then(() => {
            Messager.ok('批量删除成功')
            getPage()
        })
    })
}


</script>

<style lang="scss">
    .main-box {
        display: flex;
        flex-direction: column;

        .table-box {
            flex: 1;
            overflow: hidden;
        }
    }

    .operation-bar {
        display: flex;
    }
</style>